<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'hidden', padding: '0px', display: 'grid', 'grid-template-rows': '1fr auto'}" [nzMaskClosable]="false" [nzWidth]="'500px'"
           [nzVisible]="visible" [nzTitle]="'图层列表'" (nzOnClose)="close()">

    <div class="list" *nzDrawerContent>
        <div class="list-body">
            <div class="list-grid-item" *ngFor="let layer of layers">
                <label nz-checkbox [(ngModel)]="layer.visible" (ngModelChange)="switch(layer)"></label>
                <span>{{layer.name}}</span>
                <div>
                    <img style="height:32px; width: 32px;" [src]="layer.style.iconUrl" *ngIf="layer.geotype == 1" />
                    <div style="height:5px; width: 32px;" [ngStyle]="{background: layer.style.fillColor}" *ngIf="layer.geotype == 2" ></div>
                    <div style="height:32px; width: 32px;" [ngStyle]="{background: layer.style.fillColor}" *ngIf="layer.geotype == 3" ></div>
                </div>
                <div class="list-grid-item-action">
                    <button nz-button nzSize="small" [nzType]="layer.active ? 'primary' : 'default'" (click)="active(layer)"><i nz-icon nzType="edit"></i></button>
                    <button nz-button nzSize="small" [nzType]="layer.labeled ? 'primary' : 'default'" (click)="label(layer)"><i nz-icon nzType="tag"></i></button>
                    <!-- <button nz-button nzSize="small" [nzType]="'default'"><i nz-icon nzType="setting"></i></button> -->
                </div>
            </div>
        </div>
    </div>
</nz-drawer>
